<template>
  <el-drawer direction="rtl" v-model="visible" :before-close="handleClose">
    <template #header>
      <span class="flow-ant-drawer-title">
        <el-icon class="anticon"><EditPen /></el-icon>
        <!-- <EditName v-model:value="node.name" /> -->
        <el-input ref="imputRef" v-if="isInput" type="text" autofocus @blur="isInput = false"
              v-model="node.name" :style="{ width: width }"/>
            <span v-else @click.stop="clickEvent()">{{ node.name }}</span>
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div v-if="node.config.showPriorityLevel" class="flow-setting-item">
          <p class="flow-setting-item-title">分支等级</p>
          <el-select
            v-model="node.config.priorityLevel"
            :size="size"
            placeholder="请选择等级"
            class="w-fill"
            ><el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          /></el-select>
        </div>
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">分支类型</p>
          <el-radio-group v-model="node.config.branchType">
            <el-radio
              :value="branchType.value"
              v-for="(branchType, i) in branchTypes"
              :key="i"
              :label="branchType.value"
            >
              {{ branchType.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-if="node.config.branchType == 1" class="flow-setting-item">
          <p class="flow-setting-item-title">条件规则</p>
          <div class="flow-setting-condition-box">
            <div v-for="(group, i) in node.config.conditionGroup" :key="i">
              <div class="flow-setting-condition-group">
                <div
                  class="flow-setting-condition-item"
                  v-for="(condition, k) in group.conditions"
                  :key="k"
                >
                  <el-select
                    v-model="condition.columnValue"
                    :size="size"
                    style="width: 40%"
                    placeholder="字段"
                    @change="handleChange"
                  >
                    <el-option-group label="基础字段">
                      <el-option
                        :value="column.value"
                        v-for="(column, i) in columns"
                        :key="i"
                        :label="column.label"
                      >
                        {{ column.label }}
                      </el-option>
                    </el-option-group>
                    <el-option-group label="表单字段">
                      <el-option
                        :value="column.value"
                        v-for="(column, i) in formColumns"
                        :key="i"
                        :label="column.label"
                        >{{ column.label }}
                      </el-option>
                    </el-option-group>
                  </el-select>
                  <div class="flow-setting-condition-option">
                    <!-- 判断(操作)符  -->
                    <!-- @update:name="condition.optTypeName = $event" -->

                    <FlowSimpleSelect
                      v-model="condition.optType"
                      :name="condition.optTypeName"
                      :datas="optTypes"
                      labelName="label"
                      style="width: 60%"
                    />

                    <!-- 值类型 -->
                    <!-- <FlowSimpleSelect
                      v-model="condition.valueType"
                      :datas="valueTypes"
                      labelName="label"
                      style="width: 26%"
                      @change="condition.conditionValue = []"
                    /> -->
                    <!-- 值 -->
                    <div class="flow-setting-condition-value">
                      <!-- 动态值 -->
                      <!-- <FlowSelect
                        v-if="condition.valueType == 2"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="dynamicValueTypes"
                        labelName="label"
                      /> -->
                      <!-- 流程值 -->
                      <!-- <FlowSelect
                        v-else-if="condition.valueType == 3"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="flowValueTypes"
                        labelName="label"
                      /> -->
                      <!-- 数据源 -->
                      <!-- <FlowSelect
                        v-else-if="condition.valueType == 4"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="columns"
                        labelName="label"
                      /> -->
                      <!-- @update:name="condition.conditionValueName = $event" -->
                      <!-- 固定  -->
                      <FlowInput
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :size="size"
                      />
                    </div>
                  </div>
                  <div
                    class="flow-setting-condition-del"
                    @click="delCondition(1, group, condition)"
                  >
                    <!--                    <a-icon type="delete" theme="filled" />-->
                    <!-- <i class="el-icon-delete" theme="filled"></i> -->
                    <el-icon><Delete /></el-icon>
                  </div>
                </div>
                <div
                  class="flow-setting-condition-add"
                  @click="addCondition(1, group)"
                >
                  <!--                  <a-icon type="plus-circle" theme="filled" />-->
                  <!-- <i class="el-icon-circle-plus-outline" theme="filled"></i> -->
                  <el-icon><CirclePlus /></el-icon>
                  <span style="margin-left: 5px">且条件</span>
                </div>
              </div>
              <div
                v-if="
                  node.config.conditionGroup.length > 1 &&
                  i != node.config.conditionGroup.length - 1
                "
                class="flow-setting-condition-group-connector"
              >
                或
              </div>
            </div>
            <div class="flow-setting-condition-add" @click="addGroup(1)">
              <!--              <a-icon type="plus-circle" theme="filled" />-->
              <!-- <i class="el-icon-circle-plus-outline" theme="filled"></i> -->
              <el-icon><CirclePlus /></el-icon>
              <span style="margin-left: 5px">或条件</span>
            </div>
          </div>
        </div>
        <div v-if="node.config.branchType == 2" class="flow-setting-item">
          <p class="flow-setting-item-title">公式规则</p>
          <div class="flow-setting-condition-box">
            <el-input v-model="node.config.expression"></el-input>
          </div>
        </div>
      </div>
    </div>
    {{ node }}
    <!-- <FlowDrawerFooter @close="onClose" @save="onSave"/> -->
  </el-drawer>
</template>
<script setup name="FlowConditionDrawer">
import { flowMixin } from "../../../mixins/flowMixin";
import EditName from "../../../common/EditName.vue";
import FlowSelect from "../../../Component/FlowSelect.vue";
import FlowSimpleSelect from "../../../Component/FlowSimpleSelect.vue";
import FlowInput from "../../../Component/FlowInput.vue";
import flowhook from "../../../mixins/flowhook";

// import FlowDrawerFooter from '../../common/DrawerFooter.vue';

import {
  reactive,
  ref,
  createApp,
  computed,
    nextTick,
  watch,
  onMounted,
  toRefs,
  defineExpose,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const store = useStore();
const { uuid, nameClass, delNode, drawerWidth, ccIcon } = flowhook();

const emit = defineEmits(["close"]);
const isInput = ref(false);
const node = ref({});
const visible = ref(false);
const size = ref("default");

const levelOptions = ref([]);
const branchTypes = reactive([
  { label: "规则", value: 1 },
  { label: "公式", value: 2 },
  { label: "其他", value: 3 },
]);

const columns = reactive([
  { label: "姓名", value: "姓名" },
  { label: "工号", value: "工号" },
  { label: "部门", value: "部门" },
  { label: "Base地", value: "Base地" },
  { label: "所属体系", value: "所属体系" },
  { label: "归属地", value: "归属地" },
]);

const formColumns = reactive([{ label: "加班类型", value: "加班类型" }]);

const optTypes = reactive([
  { label: "等于", value: "eq" },
  { label: "不等于", value: "ne" },
  { label: "大于", value: "gt" },
  { label: "大于等于", value: "ge" },
  { label: "小于", value: "lt" },
  { label: "小于等于", value: "le" },
  /*  { label: '为空', value: '7' },
        { label: '不为空', value: '8' }, */
]);

const valueTypes = reactive([
  { label: "固定", value: "1" },
  { label: "动态值", value: "2" },
  { label: "流程值", value: "3" },
  /* { label: '数据源', value: '4' }, */
]);

const dynamicValueTypes = reactive([
  { label: "当前员工", value: "1" },
  { label: "当前员工工号", value: "2" },
  { label: "当前部门", value: "3" },
  { label: "当前组织", value: "4" },
  { label: "下级部门", value: "5" },
  { label: "上级部门", value: "6" },
  { label: "当前日期", value: "7" },
  { label: "当前时间", value: "8" },
]);

const flowValueTypes = reactive([
  { label: "流程状态", value: "1" },
  { label: "流程创建人", value: "2" },
]);

const dataSourceOptions = reactive([
  {
    value: "1",
    label: "本表单",
    children: [
      { label: "姓名", value: "姓名" },
      { label: "工号", value: "工号" },
      { label: "部门", value: "部门" },
      { label: "Base地", value: "Base地" },
      { label: "所属体系", value: "所属体系" },
      { label: "归属地", value: "归属地" },
    ],
  },
]);

const afterVisibleChange = (val) => {
  console.log("visible", val);
};

const showDrawer = (data, routeNode) => {
  visible.value = true;
  node.value = data;
  console.log("分支条件-------->", JSON.stringify(routeNode));
  // 等级
  if (node.value.config.showPriorityLevel) {
    const options = [];
    routeNode.branchs.forEach((item, index) => {
      let priorityLevel = index + 1;
      options.push({
        label: "优先" + priorityLevel,
        value: priorityLevel,
      });
    });
    levelOptions.value = options;
    console.log("levelOptions", levelOptions.value);
  }
};

const handleChange = () => {};

const addGroup = (type) => {
  if (type == 1) {
    node.value.config.conditionGroup.push({
      id: uuid,
      condition: "OR",
      conditions: [
        {
          id: uuid,
          columnId: "姓名",
          columnName: "姓名",
          columnValue: "姓名",
          columnType: undefined,
          optType: "eq",
          optTypeName: "等于",
          valueType: "1",
          conditionValue: [],
          conditionValueName: [],
        },
      ],
    });
  }
};
const addCondition = (type, currGroup) => {
  if (type == 1) {
    node.value.config.conditionGroup.forEach((group) => {
      if (currGroup.id == group.id) {
        group.conditions.push({
          id: uuid,
          columnId: undefined,
          columnName: undefined,
          columnValue: undefined,
          columnType: undefined,
          optType: undefined,
          optTypeName: undefined,
          valueType: undefined,
          conditionValue: [],
          conditionValueName: [],
        });
      }
    });
  }
};
const delCondition = (type, currGroup, CurrCondition) => {
  if (type == 1) {
    node.value.config.conditionGroup.forEach((group, k) => {
      if (currGroup.id == group.id) {
        group.conditions.forEach((condition, index) => {
          if (CurrCondition.id == condition.id) {
            group.conditions.splice(index, 1);
            // 当前组没有条件了，当前组也需要删除
            if (group.conditions.length == 0) {
              node.value.config.conditionGroup.splice(k, 1);
            }
          }
        });
      }
    });
  }
};
const onClose = () => {
  visible.value = false;
  emit("close");
};

const handleClose = () => {
  // 更新节点显示信息
  let content = "";
  console.log(
    "this.node.config.branchType类型为:" + node.value.config.branchType
  );
  if (node.value.config.branchType == 1) {
    node.value.config.conditionGroup.forEach((group, j) => {
      if (j != 0) {
        content += " 或 ";
      }
      if (group.conditions.length > 0) {
        group.conditions.forEach((condition, i) => {
          console.log(
            "---------------------condition",
            JSON.stringify(condition)
          );
          //const conditionValueName = condition.conditionValueName[0];
          const conditionValueName = condition.conditionValue;
          console.log(
            "---------------------conditionValueName",
            conditionValueName
          );

          if (conditionValueName) {
            if (i != 0) {
              content += " 且 ";
            }
            content +=
              "[" +
              condition.columnValue +
              " " +
              condition.optTypeName +
              " " +
              conditionValueName +
              "]";
          }
        });
      }
    });
  } else if (node.value.config.branchType == 2) {
    content += "公式:[" + node.value.config.expression + "]";
  } else {
    content += "任意(其他)";
  }
  store.dispatch("process/updateNode", {
    currNode: node.value,
    field: "content",
    value: null,
  });
  store.dispatch("process/updateNode", {
    currNode: node.value,
    field: "error",
    value: true,
  });
  if (content) {
    console.info("content", content);
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "error",
      value: false,
    });
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "content",
      value: content,
    });
  }
  onClose();
};

const imputRef = ref();
const clickEvent = () => {
  isInput.value = true;
}

watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      imputRef.value.focus()
    })
  }
})

defineExpose({
  showDrawer,
});
</script>
